<!--
 * @Author: 凌宇king
 * @Date: 2022-09-24 14:26:26
 * @LastEditTime: 2022-09-25 15:12:11
-->
<template>
    <div class="container">
        <template>
            <div class="addAdmin">
                <el-button type="primary" @click="addAdmin" size="mini">增加管理员</el-button>
            </div>
            <el-divider></el-divider>
            <el-table :data="tableData" stripe border height="400">
                <el-table-column prop="openid" label="openid" width="260">
                </el-table-column>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="password" label="密码">
                </el-table-column>
                <el-table-column prop="nickName" label="昵称">
                </el-table-column>
                <el-table-column prop="role" label="角色">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.role === '超级管理员' ? '' : 'danger'" effect="plain" disable-transitions>
                            {{scope.row.role}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="adminEdit(scope)" size="mini">修改</el-button>
                        <el-popconfirm @cancel="handleCancel" style="margin-left:10px" icon-color="red"
                            title="你确定要删除这条信息吗？" @confirm="handleConfirm(scope)">
                            <el-button type="danger" slot="reference" size="mini">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                    :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
</template>   
<script>
export default {
    created() {
        this.getAdminList()
    },
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pagesize: 5,
            total: 0
        }
    },
    methods: {
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`); 
            this.page = val
            this.getAdminList()
        },
        getAdminList() {
            this.$http.get('/admGetAdmins',
                {
                    params: {
                        currentPage: this.currentPage, pagesize: this.pagesize
                    }
                }).then(res => {
                    //返回的数据在res.data中
                    // console.log(res.data)
                    if (res.data.status === 'success') {
                        this.total = res.data.total
                        this.tableData = res.data.result
                    }
                    else {
                        this.$message.error('服务器错误')
                    }
                }).catch(err => {
                    console.log(err)
                    this.$message.error('服务器错误')
                })
        },
        //修改
        adminEdit(scope) {
            // console.log(scope)
            const { row } = scope
            this.$router.push({
                name: 'adminEdit',
                params: { action: 'edit', info: row }
            })
        },
        //删除
        handleConfirm(scope) {
            const { _id } = scope.row
            this.$http.get('/delAdmin',
                { params: { _id } }).then(res => {
                    if (res.data === 'success') {
                        this.$message.success('删除成功')
                    } else { this.$message.error('删除失败') }
                }).catch(error => { this.$message.error('删除失败') })
            this.getAdminList();
        },
        handleCancel() {
            this.$message.error('取消操作')
        },
        //添加管理员
        addAdmin() {
            this.$router.push(`/adminEdit?${Math.random() * 1000 + 10}`)
        }


    }
}
</script>

<style lang="scss" scoped>
th {
    height: 50px;
}

.addAdmin {
    text-align: right;
    margin: 10px;
}

.el-table {
    background-color: #F2F6FC;
}

.container {
    background-color: #F2F6FC;
    padding: 5px;
}
</style>